 <template>
  <el-main class="main">
    <div class="comName">企业名称： {{companyName}}</div>
    <div class="btn-box">
      <el-button @click="addGoods">新增商品</el-button>
      <el-button @click="goodsPlanManage">商品计划管理</el-button>
    </div>
    <el-table :data="goodsInfoList">
        <el-table-column prop="id" align="center" label="商品ID">
        </el-table-column>
        <el-table-column prop="name" align="center" label="商品名称">
        </el-table-column>
        <el-table-column prop="youServers" align="center" label="商品包含服务">
        </el-table-column>
        <el-table-column prop="ptGoodsPlanName" align="center" label="所属计划">
        </el-table-column>
        <el-table-column prop="beginTimeValue" align="center" label="生效时间">
        </el-table-column>
        <el-table-column prop="endTimeValue" align="center" label="失效时间">
        </el-table-column>
        <el-table-column label="操作" align="center" width='220'>
          <template slot-scope="scope">
            <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
            <el-button type="text" size="small" @click="undercarriage(scope.row)">{{scope.row.deleteFlag ? '上架': '下架'}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="demonstration-box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageParams.size"
          layout="total, prev, pager, next"
          :total="pageParams.totalCount"
        ></el-pagination>
      </div>
  </el-main>
 </template>

 <script>

 const queryString = require('querystring');
 const tips = ['操作成功, 请去信息复核页面查看'];
import page from 'data/page'
 export default {
   name: 'goodsList',
   mixins: [page],
   data() {
     return {
       companyName: this.$route.query.companyName,
       id: this.$route.query.id,
       goodsInfoList: [],
       currentPage: 1
     }
   },
   created() {
     this.search()
   },
   methods: {
     edit(item) {
       this.$router.push('addOrEditGoods?type=edit&goodsId=' + item.id + '&companyName=' + this.companyName + '&companyId=' + this.id + '&goodsName=' + item.name)
     },
     undercarriage(item) {
        let { deleteFlag } = item;
        deleteFlag = !deleteFlag;
        this.api.delete(`/goods/${item.id}?upload=${deleteFlag}`).then((res) => {
          this.$message(res.message)
        }).catch((err) => {
          this.$message(err.data.message)
        })
     },
     addGoods() {
       this.$router.push('addOrEditGoods?type=add' + '&companyName=' + this.companyName + '&companyId=' + this.id)
     },
    search() {
      const companyId = this.id
      const params = {
        companyId,
        page: this.currentPage -1,
        size: 20
      }
      
      this.axios.get('/goods?' + queryString.stringify(params)).then((res) => {
        const code = Number(res.data.code)
        if (code === 200) {
          this.goodsInfoList = res.data.data.list
          this.goodsInfoList.forEach((goodsInfo, index) => {
            this.goodsInfoList[index].beginTimeValue = this.timeFormater(goodsInfo.beginTime).format('YYYY-MM-DD')
            this.goodsInfoList[index].endTimeValue = this.timeFormater(goodsInfo.endTime).format('YYYY-MM-DD')
          })
          this.setPage(res.data.data)
        } else {
          this.$message(this.mes.busy)
        }
      }).catch((err) => {
        console.log(err)
        this.$message(this.mes.busy)
      })
    },
    goodsPlanManage () {
      this.$router.push('goodsPlan?companyId=' + this.id + '&companyName=' + this.companyName)
    }
  }
 }
 </script>
 
 <style lang="less" scoped>
  .main{
    text-align: left;
  }
  .btn-box{
    padding: 20px 0;
    border-bottom: 1px solid #eee;
  }
  .comName{
    border-bottom: 1px solid #eee;
  }
  .com-input {
    width: 210px;
  }
 </style>
 